<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="A simple jQuery plugin for picking provinces, cities and districts of China.">
  <meta name="keywords" content="中国, 省份, 城市, 行政区, 省市区, 三级联动, 地址选择器, HTML, CSS, JS, JavaScript, jQuery plugin, province, city, district, pick, picker, picking, front-end, frontend, web development">
  <meta name="author" content="Chen Fengyuan">
  <title>Distpicker</title>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/highlightjs@9/styles/github.css" crossorigin="anonymous">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>
  <!--[if lt IE 9]>
  <div class="alert alert-warning alert-dismissible fade show m-0 rounded-0" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.
  </div>
  <![endif]-->

  <!-- Header -->
  <header class="navbar navbar-light navbar-expand-md">
    <div class="container">
      <a class="navbar-brand" href="./">Distpicker</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse" role="navigation">
        <nav class="nav navbar-nav">
          <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/blob/master/README.md" data-toggle="tooltip" title="View the documentation">Docs</a>
          <a class="nav-link" href="https://github.com/fengyuanchen/distpicker" data-toggle="tooltip" title="View the GitHub project">GitHub</a>
          <a class="nav-link" href="https://fengyuanchen.github.io/" data-toggle="tooltip" title="Explore more projects">Explore</a>
          <a class="nav-link" href="https://chenfengyuan.com/" data-toggle="tooltip" title="About the author">About</a>
        </nav>
      </div>
    </div>
  </header>

  <!-- Jumbotron -->
  <div class="jumbotron bg-primary text-white rounded-0">
    <div class="container">
      <div class="row">
        <div class="col-md col-lg-8">
          <h1>Distpicker <small class="h6">v2.0.8</small></h1>
          <p class="lead">A simple jQuery plugin for picking provinces, cities and districts of China.</p>
        </div>
        <div class="col-md col-lg-4">
          <div class="carbonads">
            <script id="_carbonads_js" src="https://cdn.carbonads.com/carbon.js?serve=CKYI55Q7&placement=fengyuanchengithubio" async></script>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Content -->
  <div class="container">
    <div class="alert alert-warning">请注意以下市/县并未设置下一级的区：济源市、潜江市、神农架林区、天门市、仙桃市、东莞市、中山市、东沙群岛、白沙黎族自治县、保亭黎族苗族自治县、昌江黎族自治县、澄迈县、儋州市、定安县、东方市、乐东黎族自治县、临高县、陵水黎族自治县、琼海市、琼中黎族苗族自治县、屯昌县、万宁市、文昌市、五指山市、嘉峪关市、阿拉尔市、北屯市、可克达拉市、昆玉市、石河子市、双河市、铁门关市、图木舒克市、五家渠市。</div>

    <!-- Getting started -->
    <h2 id="getting-started">Getting started</h2>
    <hr>
    <h3>Installation</h3>
    <p>Include files:</p>
    <pre><code class="language-html">&lt;script src=&quot;/path/to/jquery.js&quot;&gt;&lt;/script&gt;&lt;!-- jQuery is required --&gt;
&lt;script src=&quot;/path/to/distpicker.js&quot;&gt;&lt;/script&gt;</code></pre>

    <p>Create HTML elements:</p>
    <pre><code class="language-html">&lt;div&gt;&lt;!-- container --&gt;
  &lt;select&gt;&lt;/select&gt;&lt;!-- province --&gt;
  &lt;select&gt;&lt;/select&gt;&lt;!-- city --&gt;
  &lt;select&gt;&lt;/select&gt;&lt;!-- district --&gt;
&lt;/div&gt;</code></pre>

    <h3>Initialize by <code>data-toggle=&quot;distpicker&quot;</code> attribute</h3>
    <h4>Basic</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>
    <h4>Custom placeholders</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select data-province=&quot;---- 选择省 ----&quot;&gt;&lt;/select&gt;
  &lt;select data-city=&quot;---- 选择市 ----&quot;&gt;&lt;/select&gt;
  &lt;select data-district=&quot;---- 选择区 ----&quot;&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control" data-province="---- 选择省 ----"></select>
        <select class="form-control" data-city="---- 选择市 ----"></select>
        <select class="form-control" data-district="---- 选择区 ----"></select>
      </div>
    </form>
    <h4>Custom districts</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select data-province=&quot;浙江省&quot;&gt;&lt;/select&gt;
  &lt;select data-city=&quot;杭州市&quot;&gt;&lt;/select&gt;
  &lt;select data-district=&quot;西湖区&quot;&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control" data-province="浙江省"></select>
        <select class="form-control" data-city="杭州市"></select>
        <select class="form-control" data-district="西湖区"></select>
      </div>
    </form>

    <h3>Initialize by <code>$.fn.distpicker</code> method</h3>
    <h4>Basic</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker1&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker1&quot;).distpicker();</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div id="distpicker1">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>
    <h4>Custom placeholders</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker2&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker2&quot;).distpicker({
  province: '---- 所在省 ----',
  city: '---- 所在市 ----',
  district: '---- 所在区 ----'
});</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div id="distpicker2">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>
    <h4>Custom districts</h4>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker3&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker3&quot;).distpicker({
  province: '浙江省',
  city: '杭州市',
  district: '西湖区'
});</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div id="distpicker3">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <!-- Options -->
    <h2>Options</h2>
    <hr>
    <p>Supports to set the options by <code>data-*</code> attributes:</p>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;3&quot; data-province=&quot;浙江省&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="3" data-province="浙江省">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <!-- Methods -->
    <h2>Methods</h2>
    <hr>
    <p>You can call methods by <code>$().distpicker('method', arg1, arg2, ..., argN)</code>.</p>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div id=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>JavaScript:</p>
    <pre><code class="language-js">$(&quot;#distpicker&quot;).distpicker({
  province: '福建省',
  city: '厦门市',
  district: '思明区'
});</code></pre>
    <p>Demo:</p>
    <div class="docs-methods mt-2 mb-4">
      <form class="form-inline mb-2">
        <div id="distpicker">
          <select class="form-control"></select>
          <select class="form-control"></select>
          <select class="form-control"></select>
        </div>
      </form>
      <div>
        <button class="btn btn-primary" id="reset" type="button">Reset</button>
        <button class="btn btn-warning" id="reset-deep" type="button">Reset (deep)</button>
        <button class="btn btn-danger" id="destroy" type="button">Destroy</button>
      </div>
    </div>

    <!-- Examples -->
    <h2>Examples</h2>
    <hr>
    <h3>Only province and city</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Only province</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;</code></pre>

    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker">
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Select province automatically</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;1&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="1">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Select province and city automatically</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;2&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="2">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Select all districts automatically</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-autoselect=&quot;3&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-autoselect="3">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Without placeholders</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-placeholder=&quot;false&quot;&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
  &lt;select&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-placeholder="false">
        <select class="form-control"></select>
        <select class="form-control"></select>
        <select class="form-control"></select>
      </div>
    </form>

    <h3>Administrative code as value</h3>
    <p>HTML:</p>
    <pre><code class="language-html">&lt;div data-toggle=&quot;distpicker&quot; data-value-type=&quot;code&quot;&gt;
  &lt;select data-province=&quot;330000&quot;&gt;&lt;/select&gt;
  &lt;select data-city=&quot;330100&quot;&gt;&lt;/select&gt;
  &lt;select data-district=&quot;330106&quot;&gt;&lt;/select&gt;
&lt;/div&gt;
</code></pre>
    <p>Demo:</p>
    <form class="form-inline mt-2 mb-4">
      <div data-toggle="distpicker" data-value-type="code">
        <select class="form-control" data-province="330000"></select>
        <select class="form-control" data-city="330100"></select>
        <select class="form-control" data-district="330106"></select>
      </div>
    </form>
  </div>

  <!-- Footer -->
  <footer class="docs-footer">
    <div class="container">
      <p class="heart"></p>
      <nav class="nav flex-wrap justify-content-center mb-3">
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker">GitHub</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/releases">Releases</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/issues">Issues</a>
        <a class="nav-link" href="https://github.com/fengyuanchen/distpicker/blob/master/LICENSE">License</a>
        <a class="nav-link" href="https://chenfengyuan.com/">About</a>
      </nav>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap@4/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/highlightjs@9/highlight.pack.js" crossorigin="anonymous"></script>
  <script src="https://fengyuanchen.github.io/shared/google-analytics.js" crossorigin="anonymous"></script>
  <script src="js/distpicker.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
